{include file="header/index" /}
<style>
    table th,table td{
        text-align: left !important;
    }
</style>
<div class="container whitebg">
    <div class="topnav clearfix">
        <div class="title fl">
            <h3>工单详情&nbsp;--</h3>
            <a href="#information class="ac"">基本信息</a>
            <a href="#">工单信息</a>
            <a href="#">工单轨迹</a>
        </div>
        <div class="backbtnwrap fr">
            <button type="button" class="btn backbtn" onclick="backurl(this)">返回</button>
        </div>

        <!--超管登录，工单为未处理-->
        {if condition="$workData[0]['work_order_status'] == 2"}
            {if condition="($groupDataId == 1) OR ($groupDataId == 2)"}
                <div class="backbtnwrap fr">
                    <button type="button" class="btn backbtn" onclick="confirm()">确认工单</button>&nbsp;&nbsp;&nbsp;
                </div>
            {/if}
        {/if}
        <!--超管登录，工单为已确认-->
        {if condition="$workData[0]['work_order_status'] == 3"}
            {if condition="($groupDataId == 1) OR ($groupDataId == 2)"}
                <div class="backbtnwrap fr">
                    <button type="button" class="btn backbtn" onclick="EngineeringDepartment()">指派工程部</button>&nbsp;&nbsp;&nbsp;
                </div>
            {/if}
        {/if}
        <!--超管登录，工单为已指派工程部-->
        {if condition="$workData[0]['work_order_status'] == 5"}
            {if condition="($groupDataId == 1) OR ($groupDataId == 2)"}
                <div class="backbtnwrap fr">
                    <button type="button" class="btn backbtn" onclick="AssignEngineer()">指派工程人员</button>&nbsp;&nbsp;&nbsp;
                </div>
            {/if}
        {/if}
        <!--工程部登录，工单为已指派工程部-->
        {if condition="$workData[0]['work_order_status'] == 5"}
            {if condition="$groupDataId == 4"}
                <div class="backbtnwrap fr">
                    <button class="btn btn-default bluecolor ml20" onclick="AssignEngineer()">指派工程人员</button>
                </div>
            {/if}
        {/if}


    </div>

    <div class="information" id="information">
        <p class="title">基本信息</p>
        <table class="table table-bordered order_details_table">

                {volist name="basicData" id="k"}
            <tr>
                <th>姓名</th>
                <td>{$k.username}</td>
                <th>账户</th>
                <td>{$k.telphone}</td>
            </tr>
            <tr>
                <th>创建时间</th>
                <td>{:date('Y-m-d H:i:s',$k.add_time)}</td>
                <th>账号状态</th>
                {if condition="($k.remark != '')"}
                <td class="redcolor" style="width: 60%">{$k.account_status}&nbsp;&nbsp;&nbsp;备注：{$k.remark}</td>
                {/if}
                {if condition="($k.remark == '')"}
                <td class="redcolor">{$k.account_status}</td>
                {/if}
            </tr>
            <tr>
                <th>生日</th>
                <td>{:date('Y-m-d',$k.birthday)}</td>
                <th>联系电话</th>
                <td>{$k.telphone}</td>
            </tr>
            <tr>
                <th>联系地址</th>
                <td colspan="3">{$k.user_address}&nbsp;&nbsp;&nbsp;</td>
            </tr>
                {/volist}
        </table>
    </div>

    <!--工单ID隐藏域-->
    <input type="hidden" name="work_order_id" value="{$workData[0]['work_order_id']}" />
    <!--用来装哪个角色登录的-->
    <input type="hidden" value="{$groupDataId}" name="groupDataId" />
    <!--当前工单状态隐藏域-->
    <input type="hidden" value="{$workData[0]['work_order_status']}" name="workorderstatus" />
    <!--指派工程人员结果存放-->
    <input type="hidden" value="" name="assignEngineers" id="_dataStatus" />
    <div class="Orderinformation" id="Orderinformation">
        <p class="title">工单信息</p>
        <table class="table table-bordered">
                {volist name="workData" id="k"}
            <tr>
                <th>工单号</th>
                <td>{$k.order_number}</td>
                <th>合同编号</th>
                <td>{$k.contract_no}</td>
            </tr>
            <tr>
                <th>业务</th>
                <td>{$k.business_id}</td>
                <th>所属管理区域</th>
                <td>{$k.y_name}--{$k.company_name}</td>
            </tr>
            <tr>
                <th>处理状态</th>
                <td onclick="usrePopup({$k.work_order_id})">
                    <span class="selecttxt cursor col-127">{$work_order_status[$k.work_order_status]}</span>
                </td>

                <!--<td>{$k.work_order_status}</td>-->
                <th>工程人员</th>
                <td>{$k.engineers_name ? $k.engineers_name : '未指派'}</td>
            </tr>
            <tr>
                <th>工程人员电话</th>
                <td>{$k.engineers_phone ? $k.engineers_phone : '未指派'}</td>
                <th>设备号</th>
                <td>
                    {volist name="equipmentNumber" id="ke"  offset="0" length='1'}
                    设备号：{$ke.equipments_number}&nbsp;&nbsp;&nbsp;
                    {/volist}

                    {if condition="(count($equipmentNumber) > 1)"}
                    <button id="devicedetails" type="button" onmouseover="mouseshow(this)" onmouseout="mousehide(this)">●●●</button>
                    <div class="frame" style="width: 200px;">
                        <span class="triangle"></span>
                        {volist name="equipmentNumber" id="ke"  offset="1"}
                        设备号：{$ke.equipments_number}<br>
                        {/volist}
                    </div>
                    {/if}
                </td>
            </tr>
            <tr>
                <th>安装地址</th>
                <td>{$k.service_address}</td>
                <th>费用</th>
                <td>￥{$k.combo_money ? $k.combo_money : '0.00'}元</td>
            </tr>
            <tr>
                <th>移机新地址</th>
                <td class="newaddress">
                    <span>{$k.move_address}</span>
                </td>

                <th>更换配件</th>
                <td>
                    {volist name="partsData" id="ke"  offset="0" length='1'}
                    配件名称：{$ke.parts_name} ; 配件数量：{$ke.parts_number}
                    {/volist}

                    {if condition="(count($partsData) > 1)"}
                    <button id="devicedetails" type="button" onmouseover="mouseshow(this)" onmouseout="mousehide(this)">●●●</button>
                    <div class="frame" style="width: 200px;">
                        <span class="triangle"></span>
                        {volist name="partsData" id="ke"  offset="1"}
                        配件名称：{$ke.parts_name} ; 配件数量：{$ke.parts_number}<br>
                        {/volist}
                    </div>
                    {/if}
                </td>
            </tr>
            <tr>
                <th>联系人</th>
                <td>{$k.contacts}</td>
                <th>联系电话</th>
                <td>{$k.contact_number}</td>
            </tr>
            <tr>
            <th>备注</th>
            <td colspan="3" style="width:90%;">{$k.remarks}</td>
            </tr>
                {/volist}

        </table>
    </div>


    <div class="ordertrajectory" id="ordertrajectory">
        <p class="title">工单轨迹</p>
        <div class="ordertrajectory_list">
            {if condition="isset($userData)"}
            <!--工单轨迹-->
                {volist name="userData" id="k"}
            <p>{$k.remarks}<time>{:date('Y年m月d日 H:i:s',$k.operating_time)}</time></p>
                {/volist}
            {else /}
            <p>暂无记录</p>
            {/if}
        </div>
        <input type="hidden" name="" id="page" value="1" />
        <p class="title fr pointer" onclick="loadLog({$workData[0]['work_order_id']})">更多&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-down"></i></p>
    </div>
</div>
</body>

</html>
<script type="text/javascript">

    // 点击事件，获取更多工单轨迹
    function loadLog(workid){
        var page = $("#page").val();
        // 发送ajax请求，获取更多记录
        $.getJSON("{:url('/administrative/workorder/getWorkLog')}",{workid:workid, page:page},function(data){
            if (data[0]['status'] == 1) {
                $("#page").val(data[0]['page']);
                var str = '';
                    $.each(data,function(k,v){
                       str += '<p>'+ v.remarks +'<time>'+ v.operating_time +'</time></p>';
                });
                $(".ordertrajectory_list").append(str);
            }else{
                layer.msg('没有更多了', {icon: 0});
            }
        })
    }

    // 确认订单
    function confirm(){
        var workID = $("input[name='work_order_id']").val();
        // 发送ajax请求,判断是否已经指派工程部
        $.getJSON('{:url("/administrative/workorder/judbatchconfirmation")}',{work_id:workID},function(data){
            console.log(data);
            if (data.status == 0) {
                top.layer.msg(data.message, {icon: 2});
            }
            if (data.status == 1) {
                top.layer.confirm('是否确认工单？', {btn: ['确认','取消']}, function(){
                    // 发送ajax请求
                    $.getJSON('{:url("/administrative/workorder/batchconfirmation")}',{work_id:workID},function(data){
                        if (data.status == 0) {
                            top.layer.msg('工单确认失败', {icon: 2});
                            var srcs = "/administrative/workorder/detail?id="+ {$workData[0]['work_order_id']} ;
                            window.location.reload("src",srcs);
                        }else{
                            top.layer.msg('工单确认成功', {icon: 1});
                            var srcs = "/administrative/workorder/detail?id="+ {$workData[0]['work_order_id']} ;
                            window.location.reload("src",srcs);
                        }
                    });
                });
            }
        });
    }


    //指派工程部model
    function EngineeringDepartment() {
            // 获取工单id
            var workID = [{$workData[0]['work_order_id']}];
            // 发送ajax请求,判断是否已经指派工程部
            $.getJSON('{:url("/administrative/workorder/judgeworkoder")}',{work_id:workID,status:1},function(data){
                // console.log(data);
                if (data.status == 0) {
                    top.layer.msg(data.message, {icon: 2});
                }
                if (data.status == 1) {
                    top.layer.confirm('是否确认指派工程部？', {btn: ['确认','取消']}, function(){
                        // 发送ajax请求
                        $.getJSON('{:url("/administrative/workorder/assigndepartment")}',{work_id:workID},function(data){
                            if (data.status == 0) {
                                top.layer.msg('指派工程部失败', {icon: 2});
                                var srcs = "/administrative/workorder/detail?id="+ {$workData[0]['work_order_id']} ;
                                window.location.reload("src",srcs);
                            }else{
                                top.layer.msg('指派工程部成功', {icon: 1});
                                var srcs = "/administrative/workorder/detail?id="+ {$workData[0]['work_order_id']} ;
                                window.location.reload("src",srcs);
                            }
                        });
                    });
                }
            });
    }


    // 工程人员指派弹窗页面
    function AssignEngineer() {
            // 获取工单ID
            workID = [{$workData[0]['work_order_id']}];

            $.getJSON("{:url('/administrative/workorder/judgeengineers')}",{work_order_id:workID},function(data){
                if (data.status == 0) {
                    top.layer.msg(data.message, {icon: 2});
                }
                if (data.status == 1) {
                    var html = '';
                    html +='<div id="userh">';
                    html +='<div class="modal-body">';
                    html +='<h2 class="fs14 col-666 mb10">选择工程人员</h2>';
                    html +='<p>';
                    html +='<input class="modalUser-input" type="text" name="username" placeholder="请输入姓名">';
                    html +='<input class="modalUser-input" type="text" name="telphone__" placeholder="请输入联系电话">';
                    html +='<input class="modalUser-input" type="text" name="id_card__" placeholder="请输入身份证号码">';
                    html +='<button onclick="searcheq()" class="btn btn-primary mr10 pl15 pr15 pt3 pb3">搜索</button>';
                    html +='<button onclick="engineeradd()" class="btn btn-primary pl15 pr15 pt3 pb3"><i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增工程人员</button>';
                    html +='</p>';
                    html +='<table class="table table-bordered mt20">';
                    html +='<thead>';
                    html +='<tr>';
                    html +='<th></th>';
                    html +='<th>头像</th>';
                    html +='<th>员工编号</th>';
                    html +='<th>姓名</th>';
                    html +='<th>联系电话</th>';
                    html +='<th>身份证号码</th>';
                    html +='<th>联系地址</th>';
                    html +='</tr>';
                    html +='</thead>';

                    html +='<tbody id="elist">';
                    html +='<tr>';
                    html +='<td><input type="radio" name="engineersId" value=""></td>';
                    html +='<td><img style="width: 30px; height: 30px;" src="__IMG__/Head_img.jpg"></td>';
                    html +='<td></td>';
                    html +='<td></td>';
                    html +='<td></td>';
                    html +='<td></td>';
                    html +='<td><p class="ellipsis" style="150px" title="重庆市渝北区中溉路13-13"></p></td>';
                    html +='</tr>';
                    html +='</tbody>';

                    html +='</table>';
                    html +='<div class="">';
                    html +='<div class=" clearfix">';
                    html +='<div class="clearfix" style="float:right;margin: 0 auto;">';
                    html +='<span class="fl mt5" id="count">共0条数据</span><span id="allpage"  class="fl  mr20 mt5"></span><span  class="fl" id="AjaxPage"></span>';
                    html +='</div>';
                    html +='<div class="spiner-example">';
                    html +='<div class="sk-spinner sk-spinner-three-bounce">';
                    html +='<div class="sk-bounce1"></div>';
                    html +='<div class="sk-bounce2"></div>';
                    html +='<div class="sk-bounce3"></div>';
                    html +='</div>';
                    html +='</div>';
                    html +='</div>';
                    html +='</div>';
                    html +='</div>';
                    html +='<div class="modal-footer t_center">';
                    html +='<button type="button" onclick="engineersqr({$workData[0]['work_order_id']})" class="btn btn-primary ml30 mr30 pl20 pr20 pt3 pb3">确认</button>';
                    html +='<button type="button" class="btn btn-default ml30 mr30 pl20 pr20 pt3 pb3" onclick="cancelmodel()">取消</button>';
                    html +='</div>';
                    html +='</div>';
                    //页面层
                    parent.layer.open({
                        title:'选择工程人员',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['823px', '550px'], //宽高
                        content: html
                    });
                    Ajaxpages(1);
                }
            });
    }
    // 工程人员指派弹窗页面分页
    function Ajaxpages(curr) {
        // 搜索数据
        var username = $.trim(parent.$("input[name='username']").val());   // 姓名
        var telphone = $.trim(parent.$("input[name='telphone__']").val()); // 联系电话
        var id_card = $.trim(parent.$("input[name='id_card__']").val());   // 身份证号
        $.getJSON("{:url('/administrative/workorder/getengineers')}",{
            page: curr || 1,
            username: username,
            telphone: telphone,
            id_card: id_card
        },function(data){
            parent.$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
            if(data == '') {
                parent.$("#elist").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
                parent.$('#count').html("共" + 0 + "条数据");
            } else {
                // 字符串拼接
                $("#elist").html('');
                var str = '';
                $.each(data,function(k,v){
                    str +='<tr>';
                    str +='<td><input type="radio" name="engineersId" value="'+v.engineers_id+'" data="'+v.engineers_name+'" number="'+v.engineers_number+'" telphone="'+v.engineers_phone+'" detail="1"></td>';
                    str +='<td><img style="width: 30px; height: 30px;" src="__IMG__/Head_img.jpg"></td>';
                    str +='<td>' + v.engineers_number + '</td>';
                    str +='<td>' + v.engineers_name + '</td>';
                    str +='<td>' + v.engineers_phone + '</td>';
                    str +='<td>' + v.engineers_idcard + '</td>';
                    str +='<td><p class="ellipsis" style="150px" title="重庆市渝北区中溉路13-13">' + v.engineers_address + '</p></td>';
                    str +='</tr>';
                });
                // 将拼接的数据输出在页面
                parent.$("#elist").html(str);
                // 总的数据
                parent.$('#count').html("共" + data[0].count + "条数据");
                parent.laypage({
                    cont: parent.$('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: data[0].allPage, //总页数
                    skip: true, //是否开启跳页
                    skin: '#337ab7', //分页组件颜色
                    curr: curr || 1,
                    first: '首页', //若不显示，设置false即可
                    last: '尾页', //若不显示，设置false即可
                    groups: 3, //连续显示分页数
                    jump: function(obj, first) {
                        if(!first) {
                            Ajaxpages(obj.curr)
                        }
                        $('#allpage').html('，第'+ obj.curr +'页，共'+ '<i>'+obj.pages+'</i>' +'页');
						inputlength();
                    }
                });
            }
        });
    }
    // 处理指派任务
    function Handles(engineers_id,engineers_number,engineers_name,engineers_phone){
        $.getJSON("{:url('/administrative/workorder/assignengineers')}",{
            work_order_id: workID,               // 工单id
            engineers_id: engineers_id,		  	 // 工程人员id
            engineers_number: engineers_number,  // 工程人员编号
            engineers_name: engineers_name,      // 工程人员姓名
            engineers_phone: engineers_phone	 // 工程人员电话
        },function(data){
            $("#_dataStatus").val(data.status);
        });
    }
    // 工单指派结果
    function AssignResults(){
        // 获取指派结果
        var status = $("#_dataStatus").val();
        // 判断结果，并回应
        if (status == '0') {
            layer.msg('工单指派失败', {icon: 0});
        }else{
            layer.msg('工单指派成功', {icon: 1});
        }
    }

    //修改状态信息
    function usrePopup(id){
        var workorderstatus = $("input[name='workorderstatus']").val();
        var group_obj = $("input[name='groupDataId']").val();
        // 发送ajax请求获取备注信息
        $.getJSON("{:url('/administrative/workorder/getremarks')}",{work_order_id:id},function(data){
            // 获取工单类型配置信息，转换为对象
            var status_obj=<?php  echo json_encode($work_order_status); ?>;
            var status_arr = eval(status_obj);
            var str = "";

            if(group_obj == 1 && workorderstatus < 5){
            // 超管登录状态小于5
                str += "<option value=1>无效</option>";
                str += "<option value=2>前台未处理</option>";
                str += "<option value=3>前台已确认</option>";
            // 超管登录状态大于4
            }else if(group_obj == 1 && workorderstatus > 6){
                str += "<option value=1>无效</option>";
                str += "<option value=2>前台未处理</option>";
                str += "<option value=3>前台已确认</option>";
                str += "<option value=5>工程部未指派工程人员</option>";
                str += "<option value=7>工程人员未接单</option>";
                str += "<option value=8>工程人员服务中</option>";
                str += "<option value=9>工程人员已完成</option>";
                str += "<option value=10>前台未回访</option>";
                str += "<option value=11>前台已回访，未完成</option>";
                str += "<option value=12>前台已回访，已完成</option>";
            // 前台登录状态小于5
            }else if(group_obj == 2 && workorderstatus < 5){
                str += "<option value=1>无效</option>";
                str += "<option value=2>前台未处理</option>";
                str += "<option value=3>前台已确认</option>";
            // 前台登录状态大于4
            }else if(group_obj == 2 && workorderstatus > 6){
                for(var i=data[0].work_order_status+1;i<=getJsonLength(status_arr);i++){
                    str +="<option value="+i+">"+status_arr[i]+"</option>";
                }
            // 工程人员登录
            }else if(group_obj == 5 && workorderstatus == 8){
                str += "<option value=9>工程人员已完成</option>";
            }

            var html ='<div class="stateWorkorder">';
            html +='<div>';
            html +='<p class="clearfix">';
            html +='<label class="fl">处理状态</label>';
            html +='<select id="_orderStatus'+id+'">';
            html +='<option value="">选择状态</option>';
            html +=str;
            html +='</select>';
            html +='</p>';
            html +='<p class="clearfix">';
            html +='<label  class="fl">备注</label>';
            html +='<textarea id="remarks'+id+'"></textarea>';
            html +='</p>';
            html +='<p class="state-Btn">';
            html +='<button onclick="savesuccess('+id+',5)" type="button" class="btn btn-primary">保存</button>';
            html +='<button onclick="layuihide()" type="button" class="btn btn-default">取消</button>	';
            html +='</p>';
            html +='<ul class="">';
            $.each(data,function(k,v){
                html +='<li class="clearfix">';
                html +='<span class="state-lis-left fl ellipsis">' + v.remarks + '</span>';
                html +='<span class="state-lis-left fr ">备注人：'+ v.username +'  时间：' + v.operating_time + '</span>';
                html +='</li>';
            });
            html +='</ul>';
            html +='</div>';
            html +='</div>';
            html +='<input name="workOrderStatus'+id+'" value="'+id+'" type="hidden">';
            top.layer.open({
                type: 1,
                title: '处理状态',
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['600px', '420px'], //宽高
                shadeClose: true, //开启遮罩关闭
                content:html
            });
        });
    }

    // 计算json对象长度
    function getJsonLength(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }



    //鼠标移入移出
    function mousehide(obj) {
        $(obj).next().hide();
    }
    function mouseshow(obj) {
        $(obj).next().show();
    }

    //顶部导航
    $('.topnav a').click(function() {
        $(this).addClass('ac').siblings('a').removeClass();
    });

    //返回上一页
    function backurl() {
        history.back();
    };

</script>